<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-01-15 11:28:52
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-26 17:07:44
 * @FilePath: /meeting-minutes-h5/src/views/study/components/courseProgress.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-row p-4 w-full items-center">
    <div class="flex-auto">
      <van-progress :percentage="completeProgress" stroke-width="8" />
    </div>
    <div class="flex flex-row items-center ml-2 text-[#8C8C8C] text-xs">
      <p>{{ completeProgress }}%</p>
      <p>({{ completeCount }}/{{ courseFlatList?.length }}个任务)</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useStudyStore } from "@/store";
export default {
  name: "courseProgress",
  computed: {
    ...mapState(useStudyStore, {
      courseData: "courseData",
      courseFlatList: "courseFlatList"
    }),

    completeProgress() {
      const flatList = this.courseFlatList || [];
      // 计算状态为 2 的数量
      // 计算进度
      const totalCount = flatList?.length;
      const progress =
        totalCount > 0
          ? ((this.completeCount / totalCount) * 100).toFixed(0)
          : 0;
      return progress;
    },

    completeCount() {
      const flatList = this.courseFlatList || [];
      console.log("flatList: ", flatList);
      const completedCount = flatList.filter(item => item.status === 2)?.length;
      return completedCount;
    }
  }
};
</script>

<style lang="less" scoped></style>
